import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { AnyObject } from '@/types'
import { handleOnekey } from '@/api/insurance/period'
import type { OperateRecordDto } from '@/api/insurance/period/types'
import type { FilterDto } from '@/render/FilterRender'
import { SalaryStatusCnEnum } from '@/const/enum'
import { getFailReasonList } from '@/api/pay'
import type { SalaryFailReasonDto } from '@/api/pay/types'
import { downloadFile } from '@/utils/util'
import { Button, message, Modal } from 'ant-design-vue'

@Component
export class QuerySalaryStatusView extends TableRender {

    curItem = {} as OperateRecordDto

    filterConfig() {
        return {
            idCardNo: {
                name: '员工身份证',
                element: 'input'
            },
            phone: {
                name: '手机号',
                element: 'input',
                value: '17621547855'
            },
            queryPayDate: {
                name: '发薪时间',
                element: 'datetime',
                params: {
                    type: 'date',
                    valueFormat: 'YYYY-MM-DD'
                }
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'userName',
            title: '职工姓名',
        },
        // {
        //     field: 'phone',
        //     title: '手机号',
        //     width: 120
        // },
        {
            field: 'idCardNo',
            title: '身份证',
            width: 160
        },
        {
            field: 'projectName',
            title: '所属项目',
            width: 120
        },
        {
            field: 'serveCompanyName',
            title: '所属企业',
            width: 120
        },
        {
            field: 'payTime',
            title: '发薪时间',
            width: 160
        },
        {
            field: 'paymentAmount',
            title: '薪资',
        },
        {
            field: 'status',
            title: '操作状态',
            formatter: ({row}) => {
                return SalaryStatusCnEnum[row.status]
            },
            params: {
                colors: {
                    0: 'blue-light-200',
                    1: 'green',
                    2: 'gray-light-100',
                    3: 'orange',
                    4: 'red'
                }
            },
            slots: {
                default: 'status'
            }
        },
        {
            field: 'getSalaryTime',
            title: '领薪时间',
            width: 160
        },
        {
            field: 'failReasonMsg',
            title: '原因',
        }
    ] as TableRenderColumnTypes<SalaryFailReasonDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getFailReasonList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    onDownload() {
        const url = 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/getSalaryFialReason.xlsx'
        downloadFile(url)
    }

    renderTitle() {
        return <div class="flex justify-between px-20px pt-20px">
            <div class="text-lg font-bold">筛选</div>
            <Button type="link" onClick={this.onDownload}>领薪失败原因及解决方法?</Button>
        </div>
    }

    render() {
        return (
            <>
                {super.render()}
            </>
        )
    }
}

export default toNative<{}, {}>(QuerySalaryStatusView)
